<template>
  <div class="article-title">
    <h1>{{ data.title }}</h1>
    <p class="article-wrap">
      <span>
        <calendar-alt class="article-icon" />
        <span class="article-text">发布于&nbsp;{{ data.createTime }}</span>
      </span>
      <span class="article-separator">|</span>
      <span>
        <history class="article-icon" />
        <span class="article-text">发布于&nbsp;{{ data.updateupTime }}</span>
      </span>
    </p>
  </div>
</template>

<script setup lang="ts" name="ArticleTitle">
import { CalendarAlt, History } from '@vicons/fa';
import { toRefs } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        title: '',
        createTime: '',
        updateupTime: '',
      };
    },
  },
});
const { data } = toRefs(props);
</script>

<style lang="scss" scoped>
.article-title {
  box-sizing: border-box;
  padding: 140px 200px 20px;
  width: 100%;
  height: 400px;
  text-align: center;
  h1 {
    width: 100%;
    margin-bottom: 8px;
    color: #fff;
    font-weight: normal;
    font-size: 2.5em;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }
}
.article-icon {
  width: 14px;
  height: 14px;
  color: #eee;
  margin-right: 6px;
  margin-bottom: -1px;
}
.article-separator {
  display: inline-block;
  margin: 0 8px;
  color: #eee;
}
.article-text {
  color: #eee;
}

@media (max-width: 580px) {
  .article-title {
    padding: 80px 10px 0;
    height: 230px;
    h1 {
      font-size: 20px;
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .article-wrap {
      color: #eee;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
